<template>
  <div class="app-container">
    <el-dialog :title="title2" :visible.sync="open2" width="960px" append-to-body>
      <el-form
        :model="queryParams"
        ref="form"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="150px"
      >
        <!-- :file-list="form.fileList" -->
        <el-form-item label="SOP上传" prop="fileList" v-if="fileOpen">
          <FileUploads
            ref="fileUpload"
            :limit="999"
            :value="form.fileList"
            :file-list="form.fileList"
            :fileSize="15"
            :fileType="fileType"
            :productTechInfo="productTechInfo"
            :fileUrl="url"
            @input="handleImgUplaoded"
            @onRemoved="handleImgRemoved"
          ></FileUploads>
        </el-form-item>
      </el-form>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>-->
    </el-dialog>
  </div>
</template>
    
    <script>
import FileUploads from "@/components/FileUploads/index.vue";
import { updatefile, getfilelist } from "@/api/mes/pro/routeproduct";
export default {
  name: "Versions",
  components: { FileUploads },
  data() {
    return {
      //组件是否展示
      open2: false,
      //组件的标题
      title2: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工艺路径版本表格数据
      versionsList: [],
      //当前工艺中配置的工序清单
      processList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        routeId: null,
        recordId: null,
        versionsCode: null,
        versionsName: null,
        status: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null
      },
      // 表单参数
      form: {
        fileList: []
      },
      productTechInfo: {
        bomVersioncode: "",
        productCode: ""
      },
      // 表单校验
      rules: {
        routeId: [
          { required: true, message: "工艺路线ID不能为空", trigger: "blur" }
        ]
      },
      // 文件类型
      fileType: [
        "doc",
        "docx",
        "xlsx",
        "xls",
        "ppt",
        "txt",
        "pdf",
        "png",
        "jpg",
        "jpeg"
      ],
      url: "/mes/file/plm/techfile",
      fileOpen: false
    };
  },
  created() {},
  methods: {
    init(row) {
      console.log(row, "sop上传的row");
      this.form = row;
      //bom版本
      this.form.bomItemCode = row.bomItemCode;
      //产品编码
      this.form.itemCode = row.itemCode;
      this.open2 = true;
      this.title2 = "SOP上传";
      this.productTechInfo.bomVersioncode = row.bomItemCode;
      this.productTechInfo.productCode = row.itemCode;
      this.fileOpen = true;
    },
    //图片上传成功
    handleImgUplaoded(url) {
      console.log("成功", url);
      // let list = url.split(",");
      // let obj = {};
      // this.form.fileList = [];
      // console.log(list, "======list=======");
      // for (let i = 0; i < list.length; i++) {
      //   const element = {
      //     type: 1,
      //     url: list[i],
      //   };
      //   this.form.fileList.push(element);
      // }
      //上传成功后调用查询接口
    },
    //图片移除
    handleImgRemoved(imgUrl) {
      console.log(imgUrl);
      this.form.fileList = imgUrl;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updatefile(this.form).then(response => {
            this.$modal.msgSuccess("上传成功");
            this.open2 = false;
          });
        }
      });
    },
    reset() {
      this.form = {
        fileList: []
      };
      this.fileOpen = false;
    },
    // 取消按钮
    cancel() {
      this.open2 = false;
      this.reset();
    }
  }
};
</script>
    